<template>
    <div class="cswd-dnld">
        <myNav></myNav>
        <my-menu></my-menu>
        <div class="main">
            <div class="ask">
                <img
                    v-if="teacherInfo || teacherLoading"
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/cswd_ask_bj_t.png"
                    class="ask-bj"
                    alt=""
                />
                <img
                    v-else
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/cswd_ask_bj.png"
                    class="ask-bj"
                    alt=""
                />

                <div
                    v-if="teacherInfo || teacherLoading"
                    v-loading="teacherLoading"
                    class="teacher"
                >
                    <nuxt-link
                        :to="`/cswd/user/${teacherInfo && teacherInfo.user_id}`"
                        class="avatar"
                    >
                        <img
                            :src="teacherInfo && teacherInfo.user_info.avatar"
                            alt=""
                        />
                        <div
                            v-if="teacherInfo && teacherInfo.is_online == 0"
                            style="background: #c2c2c2"
                        >
                            <div></div>
                            离线
                        </div>
                        <div
                            v-if="teacherInfo && teacherInfo.is_online == 1"
                            style="background: #58c256"
                        >
                            <div></div>
                            在线
                        </div>
                        <div
                            v-if="teacherInfo && teacherInfo.is_online == 2"
                            style="background: #ff6161"
                        >
                            <div></div>
                            忙碌
                        </div>
                    </nuxt-link>
                    <div class="info">
                        <div class="teacher-name-tag">
                            {{
                                teacherInfo && teacherInfo.user_info.nickname
                            }}&nbsp;
                            <div
                                v-for="(item, index) in teacherInfo &&
                                teacherInfo.major_types.split(',')"
                                :key="index"
                            >
                                {{ item }}
                            </div>
                        </div>
                        <div class="text">
                            {{ teacherInfo && teacherInfo.user_info.bio }}
                        </div>
                    </div>
                </div>
                <div v-if="!teacherInfo" class="wxts">
                    温馨提示：该功能是会员专享功能；请在工作时间提问。工作日
                    8：30-17：30
                </div>
                <div class="textarea">
                    <el-input
                        v-model="textarea"
                        type="textarea"
                        :rows="6"
                        :minlength="10"
                        resize="none"
                        maxlength="300"
                        placeholder="请简述您的问题（至少10个字），以便老师快速了解您的情况"
                    >
                    </el-input>
                </div>

                <!-- <div class="tip-free"></div> -->
                <div class="fff-cell">
                    <div class="label">
                        添加标签<span style="padding-left: 5px; color: #ff6161"
                            >请注意，最多只能选择三个标签</span
                        >
                    </div>
                    <div class="tags">
                        <div
                            v-for="(item, index) in tags"
                            :key="index"
                            class="tag"
                            :class="{
                                'tag-active': tagsCurrent.includes(item.id),
                            }"
                            @click="clickTag(item)"
                        >
                            {{ item.name }}
                        </div>
                    </div>
                </div>
                <div class="fff-cell">
                    <div class="label">添加照片</div>
                    <el-upload
                        class="file-uploader"
                        :action="imgUploadUrl"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :before-upload="beforeUpload"
                        :on-success="onSuccess"
                        :on-remove="onRemove"
                        :headers="headers"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </div>
                <div v-if="activityTags.length > 0" class="fff-cell">
                    <div class="label">
                        添加活动标签
                        <span>（参加活动，进群参与抽奖）</span>
                    </div>
                    <div class="activity-tags">
                        <div
                            v-for="(item, index) in activityTags"
                            :key="index"
                            :class="{
                                'tag-active': activityTagCurrent == item.id,
                            }"
                            class="tag"
                            @click="clickActivityTag(item)"
                        >
                            #{{ item.name }}
                        </div>
                    </div>
                </div>
                <template v-if="userInfo && userInfo.is_gpt_vip == 0">
                    <div class="cell-title">支付方式</div>
                    <div class="fff-cell" style="background-color: transparent">
                        <div class="label">
                            <!-- <span
                                class="el-radio__input"
                                :class="{ 'is-checked': payType == 0 }"
                                @click="payType = 0"
                                ><span class="el-radio__inner"></span
                            ></span> -->
                            <img
                                src="~/assets/images/userCenter/coupon.png"
                                alt=""
                            />优惠券
                            <span class="text1"
                                >（{{ couponList.length }}张可用）</span
                            >
                            <span class="text2"
                                >默认选择剩余有效期最短的优惠券</span
                            >
                        </div>

                        <div class="new-coupon-list">
                            <div
                                v-for="(item, index) in getcouponList"
                                :key="index"
                                class="new-coupon-item"
                                @click="couponClick(item, index)"
                            >
                                <template v-if="item.type == 1">
                                    <img
                                        v-if="checkIndex != index"
                                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/ask-coupon2.png"
                                        class="no-s"
                                        alt=""
                                    />
                                    <div class="big-img" v-else>
                                        <img
                                            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/ask-coupon2-s.png"
                                            class="s"
                                            alt=""
                                        />
                                    </div>
                                </template>
                                <template v-else>
                                    <div
                                        v-if="checkIndex != index"
                                        class="coupon-imgbox"
                                    >
                                        <img
                                            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/ask-coupon4-t.png"
                                            class="no-s"
                                            alt=""
                                        />
                                        <div>{{ item.endtime_text }}到期</div>
                                    </div>
                                    <div class="big-img" v-else>
                                        <img
                                            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/ask-coupon4-s.png"
                                            class="s"
                                            alt=""
                                        />
                                        <div>{{ item.endtime_text }}到期</div>
                                    </div>
                                </template>
                            </div>
                            <div
                                v-if="couponList.length > 3"
                                class="coupon-more"
                                @click="
                                    couponListMoreShow = !couponListMoreShow
                                "
                            >
                                {{ couponListMoreShow ? "更多" : "收起" }}
                            </div>
                        </div>
                    </div>
                    <!-- <div class="fff-cell" style="background-color: transparent">
                        <div class="label">
                            <span
                                class="el-radio__input"
                                :class="{ 'is-checked': payType == 1 }"
                                @click="payType = 1"
                                ><span class="el-radio__inner"></span
                            ></span>
                            <span style="padding-left: 6px"
                                >消耗{{
                                    $route.query.id ? "2000" : "1000"
                                }}小竹叶</span
                            >
                        </div>
                        <div class="bamboo-title">
                            <span class="text1">我的小竹叶：</span>
                            <span v-if="userInfo" class="text2">{{
                                userInfo.money
                            }}</span>
                            <el-popover
                                placement="bottom"
                                width="400"
                                trigger="click"
                                @show="getMoneyLog"
                            >
                                <div class="detailBox">
                                    <div class="title fz20">小竹叶明细</div>
                                    <div class="boo-tabs">
                                        <div
                                            v-for="(item, index) in booTabs"
                                            :key="index"
                                            class="boo-tab"
                                            :class="{
                                                'boo-tab-active':
                                                    index == booTabsIndex,
                                            }"
                                            @click="detailClick(index)"
                                        >
                                            {{ item.name }}
                                            <div class="line"></div>
                                        </div>
                                    </div>
                                    <div
                                        class="detailItem flex-between"
                                        v-for="(item, index) in detailList"
                                        :key="index"
                                    >
                                        <div class="left">
                                            <div
                                                style="font-weight: bold"
                                                class="fz16 c333"
                                            >
                                                {{ item.memo }}
                                            </div>
                                            <div class="fz12 c999">
                                                {{ item.createtime }}
                                            </div>
                                        </div>
                                        <div
                                            style="font-weight: bold"
                                            :class="[
                                                {
                                                    color1:
                                                        item.money_status == 1,
                                                    color2:
                                                        item.money_status == 2,
                                                    color3:
                                                        item.money_status == 3,
                                                },
                                            ]"
                                            class="fz18"
                                        >
                                            {{ item.money }}
                                        </div>
                                    </div>
                                </div>
                                <div slot="reference" class="buttonttt">
                                    明细
                                </div>
                            </el-popover>
                        </div>
                    </div> -->
                </template>

                <div
                    v-if="userInfo && userInfo.is_gpt_vip != 0"
                    class="submit"
                    :class="{ 'no-textarea': !textarea }"
                    @click="submit"
                >
                    会员专享提问
                </div>
                <div
                    v-else
                    class="submit1"
                    :class="{ 'no-textarea': !textarea }"
                    @click="submit"
                >
                    提交问题
                </div>
            </div>
            <div>
                <el-carousel
                    indicator-position="none"
                    height="99px"
                    style="
                        overflow: hidden;
                        border-radius: 8px;
                        margin-bottom: 17px;
                    "
                >
                    <el-carousel-item>
                        <div to="/user/myvip" @click="set_payVipShow(true)">
                            <img
                                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/ask-banner-1.png"
                                alt="小竹问答"
                            />
                        </div>
                    </el-carousel-item>
                    <!-- <el-carousel-item>
                        <div
                            to="/user/myvip"
                            @click="set_payVipShow({ show: true, index: 0 })"
                        >
                            <img
                                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/ask-banner-2.png"
                                alt="小竹问答"
                            />
                        </div>
                    </el-carousel-item> -->
                    <el-carousel-item>
                        <nuxt-link to="/service">
                            <img
                                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/service/xzwd-ask.png"
                                alt="小竹企服"
                            />
                        </nuxt-link>
                    </el-carousel-item>
                </el-carousel>
                <div class="pzbz">
                    <!-- <img
                        v-show="teacherInfo"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/teacherAskBj.png"
                        class="pzbz-bj"
                        alt=""
                    /> -->
                    <div v-if="teacherInfo">
                        <div class="pzbz-title-t">至臻品质</div>
                        <img
                            class="pzbz-img-t"
                            src="~/assets/images/csjh/teacherAskIcon1.png"
                            alt=""
                        />
                        专家定制化辅导/解答
                        <img
                            class="pzbz-img-t"
                            src="~/assets/images/csjh/teacherAskIcon2.png"
                            alt=""
                        />
                        随身财税专家团
                        <img
                            class="pzbz-img-t"
                            src="~/assets/images/csjh/teacherAskIcon3.png"
                            alt=""
                        />
                        解决多维度问题<br />全面解决疑问
                    </div>
                    <div v-else>
                        <div class="pzbz-title">品质保证</div>
                        <img
                            class="pzbz-img"
                            src="~/assets/images/csjh/ask-pzbz1.png"
                            alt=""
                        />
                        专业老师一对一
                        <img
                            src="~/assets/images/csjh/ask-pzbz2.png"
                            class="pzbz-img"
                            alt=""
                        />
                        极速应答&nbsp;实时解惑
                        <img
                            src="~/assets/images/csjh/ask-pzbz3.png"
                            class="pzbz-img"
                            alt=""
                        />
                        问题解决率99%
                    </div>
                </div>
                <div class="wx-official-account">
                    <div class="wx-official-account-div">
                        <img
                            src="~/assets/images/index/wx_code.png"
                            class="pzbz-img"
                            alt=""
                        />
                        <div>
                            关注公众号
                            <!-- <div>领取<span>免费问答券</span></div> -->
                        </div>
                    </div>
                    <div class="line"></div>
                    <div class="wx-official-account-div">
                        <img
                            src="~/assets/images/index/app_code.png"
                            class="pzbz-img"
                            alt=""
                        />
                        <div>
                            下载APP
                            <div>抽奖好礼等你取</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <el-image
            class="my-img"
            v-show="false"
            ref="myImg"
            src=""
            :preview-src-list="previewList"
        >
        </el-image>

        <recharge
            v-if="userInfo"
            ref="recharge"
            :money="getMoney"
            :payShow="payShow"
            @changeShow="changeShow"
            @pay="pay"
            @couponEvent="couponEvent"
        ></recharge>
        <no-ssr>
            <discountPopup></discountPopup>
            <payVip :show="payVipShow"></payVip>
        </no-ssr>
    </div>
</template>

<script>
import {
    getlabel_chat,
    get_activity_label,
    addQuizSubmit_chat,
    get_major_detail,
    getquizcount_chat,
} from "@/assets/api/csjhApi";
import { mapState, mapMutations, mapActions } from "vuex";

import { getanalysedata } from "@/assets/api/indexApi";
import axios from "axios";
import recharge from "@/components/index/recharge";
import { goTopSmooth } from "@/assets/utils/utils";

import myNav from "@/components/nav/myNav.vue";
import myMenu from "@/components/nav/myMenu_new";

import discountPopup from "@/components/csjh/discountPopup";
import payVip from "@/components/nav/payVip";

import { getMoneyLog } from "@/assets/api/userCenterApi";

function getMunuListIndex(e) {
    if (e == null) return 0;
    let menuIndex = parseInt(e);
    if (menuIndex >= 10) {
        return Math.trunc(menuIndex / 10) - 1;
    } else {
        return menuIndex - 1;
    }
}

export default {
    components: {
        recharge,
        myMenu,
        myNav,
        discountPopup,
        payVip,
    },
    head() {
        return {
            title: "小竹问答-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税问答,财税问答",
                },
            ],
        };
    },
    data() {
        return {
            textarea: "",
            imgUploadUrl: "",

            previewList: [],
            isUpload: false,
            images: [],

            tags: [],
            tagsCurrent: [],

            activityTags: [],
            activityTagCurrent: 0,

            payShow: false,
            couponList: [],
            checkIndex: null,

            switchSbmit: true,

            teacherInfo: null,
            teacherLoading: false,

            count: "",

            payType: 0,
            detailList: [],
            booTabs: [
                {
                    name: "全部",
                    status: "0",
                },
                {
                    name: "获取",
                    status: "1",
                },
                {
                    name: "兑换",
                    status: "2",
                },
                {
                    name: "失效",
                    status: "3",
                },
            ],
            booTabsIndex: 0,

            couponListMoreShow: true,
        };
    },
    mounted() {
        goTopSmooth();
        let token = localStorage.getItem("token");
        if (!token) {
            this.$router.push({
                path: "/login",
                query: {
                    url: window.location.pathname + window.location.search,
                },
            });
            return;
        }
        this.imgUploadUrl = axios.defaults.baseURL + "/api/common/upload";
        this.getUserInfo();

        this.getlabel_chat();
        this.get_activity_label();
        this.getquizcount_chat();

        let params = {
            m_id: 4,
            type: 1,
            describe: "普通问答",
            code: "PC2",
        };

        if (this.$route.query.id) {
            params.code = "PC4";
            params.describe = "问专家";
            this.teacherLoading = true;
            this.get_major_detail();
            this.setmenuIndex("21");
        } else {
            this.setmenuIndex("20");
        }
        getanalysedata(params);

        this.textarea = this.$route.query.ask ? this.$route.query.ask : "";
    },
    computed: {
        ...mapState("common", {
            menuIndex: (state) => state.menuIndex,
            userInfo: (state) => state.userInfo,
            menuList: (state) => state.menuList,
            payVipShow: (state) => state.payVipShow,
        }),
        //上传图片的请求头
        headers() {
            return {
                token: this.userInfo ? this.userInfo.token : "",
            };
        },
        getMoney: function () {
            if (
                this.$route.query.id &&
                this.teacherInfo &&
                Number(this.teacherInfo.major_cost) > 0
            ) {
                console.log("专业价格");
                return Number(this.teacherInfo.major_cost);
            } else {
                console.log("不专业价格");
                return this.userInfo.wenda_amount;
            }
        },
        getcouponList: function () {
            if (this.couponList.length > 3 && this.couponListMoreShow) {
                return [
                    this.couponList[0],
                    this.couponList[1],
                    this.couponList[2],
                ];
            } else {
                return this.couponList;
            }
        },
    },
    methods: {
        ...mapMutations("common", [
            "setloginShow",
            "setmenuIndex",
            "set_payVipShow",
        ]),

        ...mapActions("common", ["getUserInfo"]),

        // 获取标签 getlabel_chat
        async getlabel_chat() {
            const res = await getlabel_chat({});
            if (res.code == 1) {
                this.tags.push(...res.data);
            }
        },

        // 获取累计解决问题数
        async getquizcount_chat() {
            const res = await getquizcount_chat({});
            if (res.code == 1) {
                this.count = res.data;
            }
        },

        // 获取活动标签
        async get_activity_label() {
            const res = await get_activity_label({});
            if (res.code == 1) {
                this.activityTags.push(...res.data);
            }
        },

        // 小猪儿明细
        async getMoneyLog() {
            let res = await getMoneyLog({
                status: this.booTabs[this.booTabsIndex].status,
            });
            if (res.code == 1) {
                this.detailList = res.data;
            }
        },

        detailClick(index) {
            this.booTabsIndex = index;
            this.getMoneyLog();
        },

        async get_major_detail() {
            const res = await get_major_detail({
                id: this.$route.query.id,
            });
            if (res.code == 1) {
                this.teacherInfo = res.data;
                this.teacherLoading = false;
            } else {
                this.teacherLoading = false;
            }
        },

        menuItemClick(item) {
            this.setmenuIndex(item.index);
            this.$router.push({
                path: item.path,
            });
        },

        handleSelect(e) {
            this.setmenuIndex(e);

            if (e == "0") {
                this.$router.push({ path: "/" });
            } else if (e.length > 1) {
                let item = this.menuList[getMunuListIndex(this.menuIndex)].list;
                let i = parseInt(this.menuIndex[1]);
                if (item[i].path != this.$route.fullPath) {
                    this.$router.push({
                        name: item[i].path,
                        params: item[i].params,
                        query: item[i].query,
                    });
                }
            } else if (
                this.menuList[getMunuListIndex(this.menuIndex)].path &&
                this.$route.fullPath !=
                    this.menuList[getMunuListIndex(this.menuIndex)].path
            ) {
                this.$router.push({
                    path: this.menuList[getMunuListIndex(this.menuIndex)].path,
                });
            }
        },

        // 点击标签
        clickTag(item) {
            let index = this.tagsCurrent.indexOf(item.id);

            if (index !== -1) {
                this.tagsCurrent.splice(index, 1);
                return;
            }
            if (this.tagsCurrent.length >= 3) {
                this.tagsCurrent.shift();
            }
            this.tagsCurrent.push(item.id);
        },

        clickActivityTag(item) {
            if (this.activityTagCurrent == item.id) this.activityTagCurrent = 0;
            else {
                this.activityTagCurrent = item.id;
                this.textarea = "#" + item.name + "# " + this.textarea;
            }
        },

        // 支付弹窗显示
        changeShow(e) {
            this.payShow = e;
        },

        submit() {
            if (this.textarea.length < 11) {
                this.$alert("请您详细描述您的问题，不得低于10个字。", "提示", {
                    confirmButtonText: "确定",
                });
                this.payShow = false;
                this.switchSbmit = true;
                return;
            }
            if (this.isUpload) {
                this.$alert("请等待图片上传成功", "提示", {
                    confirmButtonText: "确定",
                });
                this.payShow = false;
                this.switchSbmit = true;
                return;
            }

            if (
                this.$route.query.id &&
                this.userInfo.id == this.$route.query.id
            ) {
                this.$alert("不可以向自己提问", "提示", {
                    confirmButtonText: "确定",
                });
                this.payShow = false;
                this.switchSbmit = true;
                return;
            }
            if (this.$route.query.id && this.teacherInfo.is_online == 0) {
                this.$confirm("当前老师不在线，是否继续提问", "提示", {
                    confirmButtonText: "继续提问",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(({ value }) => {
                        if (
                            this.userInfo.free_coupon == 0 ||
                            this.$route.query.id
                        )
                            this.payShow = true;
                        else this.pay();
                    })
                    .catch(() => {});
                this.payShow = false;
                this.switchSbmit = true;
                return;
            }
            if (this.$route.query.id && this.teacherInfo.is_online == 2) {
                this.$confirm("当前老师忙碌中，是否继续提问", "提示", {
                    confirmButtonText: "继续提问",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(({ value }) => {
                        if (
                            this.userInfo.free_coupon == 0 ||
                            this.$route.query.id
                        )
                            this.payShow = true;
                        else this.pay();
                    })
                    .catch(() => {});
                this.payShow = false;
                this.switchSbmit = true;
                return;
            }
            // if (this.$route.query.id) {
            //     this.payShow = true;
            //     return;
            // }

            let couponList = this.couponList;
            let checkIndex = this.checkIndex;
            // free_coupon 免费提问次数
            // if (
            //     this.userInfo.free_coupon == 0 &&
            //     this.userInfo.is_gpt_vip == 0
            // )
            //     this.payShow = true;
            // console.log(this.couponList);
            // 有会员 非专家情况
            if (this.userInfo.is_gpt_vip != 0 && !this.$route.query.id) {
                this.pay();
                return;
            }
            if (
                couponList.length == 0 &&
                this.payType == 0 &&
                this.userInfo.is_gpt_vip == 0
            ) {
                this.$confirm(
                    " 该功能为会员专享，非会员可查阅精选问题",
                    "提示",
                    {
                        distinguishCancelAndClose: true,
                        confirmButtonText: "开通会员",
                        cancelButtonText: "去查询",
                    }
                )
                    .then(() => {
                        this.set_payVipShow(true);
                    })
                    .catch((action) => {
                        if (action === "cancel") {
                            this.$router.push({
                                path: "/cswd/jxhd/1",
                            });
                        }
                    });
                return;
            }
            console.log(couponList.length);
            this.pay();
            // 有优惠券 选了了优惠券
            // if (
            //     couponList.length > 0 &&
            //     checkIndex != null &&
            //     this.payType == 0
            // ) {
            //     // let money =
            //     //     parseInt(this.getMoney) *
            //     //     (couponList[checkIndex].num_text / 10);
            //     // if (money > 0) this.payShow = true;
            //     // if (money == 0)
            //     this.pay();
            // } else if (couponList.length == 0 && this.payType == 0) {
            //     this.pay();
            // }
        },

        // 支付回调
        async pay() {
            if (!this.switchSbmit) return;
            this.switchSbmit = false;
            if (this.isUpload) {
                this.$alert("请等待图片上传成功", "提示", {
                    confirmButtonText: "确定",
                });
                this.payShow = false;
                this.switchSbmit = true;
                return;
            }
            if (!this.textarea) {
                this.$alert("提问不能为空", "提示", {
                    confirmButtonText: "确定",
                });
                this.payShow = false;
                this.switchSbmit = true;
                return;
            }
            let askFormData = {
                title: this.textarea,
                info_images: this.images,
                label_id: this.tagsCurrent.join(","),
                type: 2,
            };
            if (
                this.checkIndex != null &&
                this.payType == 0 &&
                this.userInfo.is_gpt_vip == 0
            ) {
                askFormData.coupon_id = this.couponList[this.checkIndex].id;
            }
            if (this.teacherInfo) askFormData.ans_uid = this.$route.query.id;
            const res = await addQuizSubmit_chat(askFormData);
            this.switchSbmit = true;
            if (res.code == 1) {
                this.payShow = false;
                this.$router.push({
                    path: `/chat/${res.data}`,
                });
            }
        },

        // 点击优惠券
        couponClick(item, index) {
            // if (this.couponList.length == 0) return;
            // this.$refs.recharge.showCoupon();
            // this.$nextTick(() => {
            //     this.$refs.recharge.checkCoupon();
            // });
            // if (this.checkIndex == index) this.checkIndex = null;
            // else
            this.checkIndex = index;
        },

        couponEvent(list, index) {
            this.couponList = list;
            this.checkIndex = index;
        },

        handlePictureCardPreview(file) {
            this.previewList = [file.url];
            this.$refs.myImg.showViewer = true;
        },

        beforeUpload() {
            this.isUpload = true;
        },

        onSuccess(response, file, fileList) {
            this.isUpload = false;
            this.getFileList(fileList);
        },
        onRemove(file, fileList) {
            this.getFileList(fileList);
        },

        // 处理组件返回数据
        getFileList(fileList) {
            console.log(fileList);
            this.images = [];
            for (let item of fileList) {
                this.images.push(item.response.data.fullurl);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.main {
    margin: 0 auto;
    padding: 40px 0;
    width: 1090px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.ask {
    box-sizing: border-box;
    width: 860px;
    background: #ffffff;
    border-radius: 15px;
    padding: 50px 50px 38px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    .cell-title {
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        padding: 0 24px;
        margin-top: 15px;
    }
    .fff-cell {
        background-color: #ffffff;
        border-radius: 12px;
        padding: 20px 24px;
        margin-top: 15px;
    }
    .ask-bj {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: 100%;
        height: auto;
    }
    > div {
        position: relative;
        z-index: 10;
    }
    .teacher {
        display: flex;
        align-items: center;
        padding-bottom: 44px;
        .avatar {
            position: relative;
            img {
                width: 84px;
                height: 84px;
                border-radius: 84px;
                object-fit: cover;
            }
            > div {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 43px;
                height: 18px;
                border-radius: 2px;
                font-size: 12px;
                color: #ffffff;
                position: absolute;
                z-index: 2;
                bottom: 0px;
                left: 20px;
                > div {
                    width: 4px;
                    height: 4px;
                    background: #ffffff;
                    border-radius: 4px;
                    margin-right: 4px;
                }
            }
        }
        .info {
            padding-left: 27px;
        }
        .teacher-name-tag {
            display: flex;
            align-items: center;
            font-size: 28px;
            font-weight: 500;
            color: #333333;
            div {
                height: 24px;
                background: #e2f4ff;
                border-radius: 4px;
                font-size: 14px;
                font-weight: 400;
                color: #4e8fd0;
                text-align: center;
                line-height: 24px;
                padding: 0 8px;
                margin-right: 7px;
            }
        }
        .text {
            font-size: 16px;
            color: #666666;
            padding-top: 12px;
            white-space: nowrap; /* 超出部分隐藏 */
            overflow: hidden; /* 文字用省略号替代超出的部分 */
            text-overflow: ellipsis;
            width: 477px;
        }
    }

    &::v-deep .el-textarea__inner {
        border-radius: 12px;
        border: none;
        background: #ffffff;
        padding: 25px 21px;
    }
    .tip-free {
        padding-top: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .tip {
        font-size: 16px;
        color: #fa5151;
    }
    .free {
        font-size: 14px;
        color: #333333;
        span {
            color: #ff6900;
        }
    }
    .label {
        font-size: 14px;
        color: #333333;
        display: flex;
        align-items: center;
        .text1 {
            color: #666666;
            font-size: 12px;
        }
        .text2 {
            color: #ff2515;
            font-size: 12px;
        }
        img {
            width: 18px;
            height: 18px;
            margin-right: 7px;
        }
    }
    .tags {
        padding-top: 6px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .tag {
            padding: 0 15px;
            height: 32px;
            line-height: 30px;
            text-align: center;
            background: #ffffff;
            border-radius: 2px;
            border: 1px solid #dcdee0;
            margin-right: 11px;
            margin-top: 13px;
            font-size: 12px;
            color: #323233;
            cursor: pointer;
        }

        .tag-active {
            color: #ff6161;
            border-color: #ff6161;
        }
    }

    .activity-tags {
        padding-top: 6px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .tag {
            padding: 0 10px;
            border-radius: 24px;
            height: 24px;
            line-height: 22px;
            text-align: center;
            background: #ffffff;
            border: 1px solid #999999;
            margin-right: 11px;
            margin-top: 13px;
            font-size: 12px;
            color: #999999;
            cursor: pointer;
        }

        .tag-active {
            color: #ffffff;
            background-color: #fca407;
            border-color: #fca407;
        }
    }
    .file-uploader {
        margin-top: 15px;
    }
    .submit {
        margin: 0 auto;
        margin-top: 70px;
        width: 253px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background: linear-gradient(90deg, #ff6900 0%, #fe965c 100%);
        border-radius: 50px;
        font-size: 18px;
        color: #ffffff;
        cursor: pointer;
        &:hover {
            opacity: 0.9 !important;
        }
        &:active {
            opacity: 0.8 !important;
        }
    }

    .submit1 {
        margin: 0 auto;
        margin-top: 70px;
        width: 253px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background: linear-gradient(-90deg, #ff943f 5%, #ffca7a 140%);
        border-radius: 50px;
        font-size: 18px;
        color: #ffffff;
        cursor: pointer;
        &:hover {
            opacity: 0.9 !important;
        }
        &:active {
            opacity: 0.8 !important;
        }
    }

    .no-textarea {
        opacity: 0.8;
    }
}

.pzbz {
    padding-top: 39px;
    padding-bottom: 65px;
    width: 200px;
    background: #ffffff;
    border-radius: 10px;
    text-align: center;
    font-size: 16px;
    color: #333333;
    background-size: 100% 100%;
    position: relative;
    .pzbz-title {
        font-size: 24px;
        color: #1c87f3;
    }

    .pzbz-title-t {
        width: 148px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: linear-gradient(
            90deg,
            #4335fb 0%,
            #9a93ff 0%,
            #98adfd 100%
        );
        border-radius: 30px;
        font-weight: 700;
        font-size: 24px;
        color: #ffffff;
        margin: 0 auto;
    }
    .pzbz-bj {
        position: absolute;
        width: 200px;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
    }
    * {
        position: relative;
        z-index: 2;
    }
    .pzbz-img {
        margin: 0 auto;
        margin-top: 55px;
        margin-bottom: 9px;
        display: block;
        width: 50px;
        height: 50px;
    }
    .pzbz-img-t {
        margin: 25px auto 14px;
        display: block;
        width: 80px;
        height: 80px;
    }
}

.wx-official-account {
    width: 200px;
    background: #ffffff;
    border-radius: 10px;
    font-size: 14px;
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 400;
    color: #333333;
    margin-top: 15px;
    padding: 12px 0 18px 12px;
    .wx-official-account-div {
        display: flex;
        align-items: center;
    }
    .line {
        width: 163px;
        height: 1px;
        background-color: #e5e5e5;
        margin: 11px 0;
    }
    span {
        color: #fa5151;
    }
    img {
        width: 70px;
        height: 70px;
        margin-right: 10px;
        display: block;
    }
}

.new-coupon-list {
    padding-top: 4px;
    padding-left: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .new-coupon-item {
        margin-top: 10px;
        margin-right: 10px;
        cursor: pointer;
        .no-s {
            width: 174px;
            height: 75px;
            display: block;
        }
        .active {
            // box-shadow: -5px 4px 10px 0 rgba($color: #ff7519, $alpha: 0.5);
            border: 1px dashed #ff7519;
        }
        .coupon-imgbox {
            position: relative;
            div {
                position: absolute;
                color: #fff;
                font-size: 9px;
                left: 93px;
                bottom: 23px;
            }
        }
        .big-img {
            width: 174px;
            height: 75px;
            position: relative;
            .s {
                position: absolute;
                left: -15px;
                top: -11px;
                width: 204px;
                height: 105px;
                display: block;
            }
            div{
                position: absolute;
                color: #fff;
                font-size: 9px;
                left: 93px;
                bottom: 23px;
            }
        }
    }

    .coupon-more {
        padding-left: 10px;
        font-weight: 400;
        font-size: 18px;
        color: #1c87f3;
        cursor: pointer;
    }
}
.coupon-list {
    display: flex;
    flex-wrap: wrap;
    padding-top: 20px;

    .coupon-item {
        display: block;
        width: 120px;
        height: 70px;
        background: #ffffff;
        border-radius: 4px 4px 6px 6px;
        border: 1px solid #dadada;
        position: relative;
        user-select: none;
        cursor: pointer;
        margin-right: 23px;
        margin-bottom: 23px;
        .l-y,
        .r-y {
            background-color: #ffffff;
            position: absolute;
            border: 1px solid #dadada;
            position: absolute;
            top: 29px;
            width: 12px;
            height: 12px;
            border-radius: 10px;
        }
        .l-y {
            left: -6px;
            transform: rotate(-45deg);
            border-top-color: #ffffff;
            border-left-color: #ffffff;
        }
        .r-y {
            right: -6px;
            transform: rotate(-45deg);
            border-bottom-color: #ffffff;
            border-right-color: #ffffff;
        }
        .name {
            height: 23px;
            background-color: #f6f6f6;
            font-size: 12px;
            color: #666666;
            line-height: 23px;
            text-align: center;
        }
        .zhe {
            font-weight: 600;
            font-size: 16px;
            color: #fa5151;
            padding-top: 12px;
            text-align: center;
        }
    }
    .coupon-active {
        border-color: #fa5151;
        .l-y,
        .r-y {
            border-color: #fa5151;
        }
        .l-y {
            border-top-color: #ffffff;
            border-left-color: #ffffff;
        }
        .r-y {
            border-bottom-color: #ffffff;
            border-right-color: #ffffff;
        }
        .name {
            background: #fff1f1;
        }
    }
}

.bamboo-title {
    display: flex;
    align-items: center;
    padding-left: 20px;
    font-weight: 400;
    font-size: 12px;
    margin-top: 20px;
    .text1 {
        color: #333333;
    }
    .text2 {
        color: #ff4040;
        padding-right: 7px;
    }
}

.detailBox {
    padding: 0 30px 10px;
    height: 500px;
    margin-top: 10px;
    overflow: hidden;
    overflow-y: auto;

    .boo-tabs {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 6px;
        position: sticky;
        top: 0;
        background-color: #ffffff;
        .boo-tab {
            width: 40px;
            text-align: center;
            text-align: #333;
            cursor: pointer;
            user-select: none;
            font-size: 16px;
            .line {
                width: 30px;
                height: 2px;
                background-color: #ffffff;
                border-radius: 1px;
                margin: 3px auto 0;
                // display: none;
            }
        }
        .boo-tab-active {
            color: #1c87f3;
            .line {
                background-color: #1c87f3;
            }
        }
    }

    .detailItem {
        padding-top: 10px;
        height: 60px;
        border-bottom: 1px solid #f1f1f1;
        .color1 {
            color: #fa5151;
        }
        .color2 {
            color: #67c23a;
        }
        .color3 {
            color: #909399;
        }
    }

    .title {
        margin-left: 120px;
        margin-bottom: 20px;
    }

    &::-webkit-scrollbar {
        width: 4px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #f1f1f1;
    }

    &::-webkit-scrollbar-track {
        border-radius: 0;
    }
}

.buttonttt {
    width: 42px;
    height: 19px;
    border: 1px solid #666666;
    line-height: 17px;
    text-align: center;
    border-radius: 17px;
    font-weight: 400;
    font-size: 12px;
    color: #666666;
    cursor: pointer;
}
::v-deep .el-upload--picture-card {
    width: 80px;
    height: 80px;
    line-height: 82px;
}

::v-deep .el-upload-list__item {
    width: 80px;
    height: 80px;
    line-height: 82px;
}

::v-deep .el-step__head.is-process {
    color: #ff892a;
    border-color: #ff892a;
}

.wxts {
    font-size: 12px;
    color: rgb(255, 97, 97);
    padding-bottom: 20px;
}
</style>
